<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
    <style>
        /* 引入Element UI字体文件 */
        @font-face {
            font-family: "element-icons";
            src: url('https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/fonts/element-icons.woff') format('woff'),
            url('https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/fonts/element-icons.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .product-list {
            margin-top: 20px;
        }

        .order-button {
            margin-top: 10px;
        }

        .logout-button {
            margin-top: 20px;
            float: right;
        }

        .el-table {
            width: 100%;
        }

        .product-image {
            max-width: 100px;
            max-height: 100px;
            vertical-align: middle;
        }

        .no-image {
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <h2>商品列表</h2>
    <el-table :data="products" class="product-list" border>
        <el-table-column prop="productId" label="ID" width="100"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="imageUrl" label="图片">
            <template slot-scope="scope">
                <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" alt="商品图片" class="product-image">
                <span v-else class="no-image">暂无图片</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button class="order-button" type="primary" @click="handleOrder(scope.row.productId)">下单</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-button class="logout-button" type="danger" @click="logout">退出登录</el-button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            products: [], // 存储商品数据的数组
        },
        created() {
            // 页面加载时获取所有商品列表
            this.getAllProducts();
        },
        methods: {
            // 获取所有商品列表
            getAllProducts() {
                axios.get('/product?operation=getAllProducts')
                    .then(response => {
                        this.products = response.data.data; // 假设返回的数据格式中有一个 data 字段存储商品列表
                    })
                    .catch(error => {
                        console.error('Error fetching products', error);
                    });
            },
            // 处理下单按钮点击事件
            handleOrder(productId) {
                const userId = localStorage.getItem('userId');
                if (!userId) {
                    alert('用户未登录，请先登录！');
                    return;
                }

                const params = new URLSearchParams();
                params.append('userId', userId);
                params.append('paymentStatus', "已支付");
                params.append('shippingAddress', "北京朝阳");
                params.append('productId', productId);
                params.append('totalAmount', '100'); // 如果需要从商品列表中获取价格，可以在这里设置

                axios.post(`/order?operation=addOrder&${params.toString()}`)
                    .then(response => {
                        this.$message({
                            message: '下单成功',
                            type: 'success'
                        });
                    })
                    .catch(error => {
                        this.$message.error('下单失败，请重试');
                        console.error('Error placing order', error);
                    });
            },
            // 处理退出登录按钮点击事件
            logout() {
                localStorage.removeItem('userId');
                location.href = '/login.html'; // 退出后跳转到登录页面
            }
        }
    });
</script>
</body>
</html>
